import React, {Component} from 'react';
import {
    Text,
    View,
    StyleSheet,
    Image,
    TouchableOpacity
} from 'react-native';
import {scaleSize} from '../../utils/screen';
import FontText from '../components/FontText';
import { i18n } from '../../i18n';
const nums = ["1","2","3","4","5","6","7","8","9","0","00"];
export default class CustomTip extends Component {
    render() {
        return (
            <View style = {styles.container}>
                <View style = {styles.harder}>
                    <FontText font = {'book'} style = {styles.title}>{i18n.t("store.customtip.title")}</FontText>
                </View>
                <View style = {styles.inputView}>
                    <FontText style = {styles.inputText} font = {'book'}>1</FontText>
                </View>
                <View style = {styles.cusBtns}>
                    {
                        nums.map((item,index)=>{
                            return (
                                <TouchableOpacity
                                    style = {styles.btn}
                                    key = {`eval_${index}`}
                                    >
                                    <FontText style = {styles.btnText} font = {'light'}>{item}</FontText>
                                </TouchableOpacity>
                            )
                        })
                    }
                    <TouchableOpacity
                        style = {styles.btn}
                        >
                        <Image style = {styles.backIcon} source = {require("../../access/imgs/tip_back_icon.png")} />
                    </TouchableOpacity>
                </View>
                <View style = {styles.controlBox}>
                    <TouchableOpacity
                        style = {styles.controlBtn}
                        >
                        <FontText style = {styles.controlText} font = {'medium'}>{i18n.t("btns.cancel")}</FontText>
                    </TouchableOpacity>
                    <TouchableOpacity
                        style = {[styles.controlBtn,{backgroundColor:"#fd265d"}]}
                        >
                        <FontText style = {[styles.controlText,{color:"#fff"}]} font = {'medium'}>{i18n.t("btns.okText")}</FontText>
                    </TouchableOpacity>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container:{
        flex:1,
        alignItems:"center",
        backgroundColor: "#fff",
    },
    harder:{
        height:scaleSize(320),
        justifyContent: 'center',
        alignItems:"center"
    },
    title:{
        color:"#505050",
        fontSize:scaleSize(60)
    },
    inputView:{
        height:scaleSize(100)
    },
    inputText:{
        color:"#505050",
        fontSize:scaleSize(36) 
    },
    cusBtns:{
        flexDirection:"row",
        flexWrap:"wrap",
        width:scaleSize(480),
        marginLeft:-scaleSize(10)
    },
    btn:{
        height:scaleSize(150),
        width:scaleSize(150),
        backgroundColor: "#f8f8f8",
        marginRight:scaleSize(10),
        marginBottom:scaleSize(10),
        justifyContent:"center",
        alignItems:"center"
    },
    btnText:{
        color:"#505050",
        fontSize:scaleSize(36)
    },
    backIcon:{
        width:scaleSize(54),
        height:scaleSize(35)
    },
    controlBox:{
        marginTop:scaleSize(60),
        flexDirection:"row",
        justifyContent:"space-between",
        width:scaleSize(470),
        marginLeft:-scaleSize(10)
    },
    controlBtn:{
        width:scaleSize(210),
        height:scaleSize(80),
        backgroundColor: "#f8f8f8",
        borderRadius:scaleSize(40),
        justifyContent:"center",
        alignItems:"center"
    },
    controlText:{
        color:"#9b9b9b",
        fontSize:scaleSize(30)
    }
})